<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <div class="my-body">
        <el-divider content-position="left">{{ name ? name : '表单预览' }}</el-divider>
        <form-model-v :fields="fields"/>
      </div>
    </el-col>
    <el-col :span="16">
      <div class="my-body">
        <el-table :data="tableData" border ref="multipleTable">
          <el-table-column prop="name" label="名称"/>
          <el-table-column prop="version" label="版本"/>
          <el-table-column prop="lastUpdated" label="更新时间">
            <template slot-scope="scope">
              {{ momentF(scope.row.lastUpdated) }}
            </template>
          </el-table-column>
          <el-table-column prop="createdBy" label="创建人"/>
          <el-table-column prop="created" label="创建时间">
            <template slot-scope="scope">
              {{ momentF(scope.row.created) }}
            </template>
          </el-table-column>
          <el-table-column prop="created" label="操作">
            <template slot-scope="scope">
              <el-link type="primary" :loading="loading" :underline="false" @click="deploy(scope.row)">部署</el-link>
              <el-link type="success" :loading="loading" :underline="false" @click="examine(scope.row)"
                       style="margin-left: 5px">查看
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import service from "@/api/service";
import table from "@/mixins/table";
import moment from "moment";
import formModelV from "@/components/formModelV";

export default {
  name: "formList",
  components: {
    formModelV
  },
  mixins: [table],
  data() {
    return {
      fields: [],
      name: ''
    }
  },
  methods: {
    init() {
      service.get('/small-service-flowable/form').then(res => {
        if (res.status === 200) {
          this.tableData = res.data;
        }
      })
    },
    momentF(v) {
      return moment(v).format("YYYY-MM-DD HH:mm")
    },
    deploy(row) {
      service.post('/small-service-flowable/form', {modelId: row.id}).then(this.callback)
    },
    examine(row) {
      this.name = row.name;
      let f = row.modelEditorJson
      let parse = JSON.parse(f);
      this.fields = parse.fields
    }
  }

}
</script>

<style scoped>

</style>